﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ValidatorTest.aspx.cs" Inherits="Web.ValidatorTest" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <script src="Javascript/jquery-1.5.2.min.js" type="text/javascript"></script>
    <script src="Javascript/jquery.validate.min.js" type="text/javascript"></script>
    <script src="Javascript/jQuery.Validate_Msg.js" type="text/javascript"></script>
    <link href="Styles/page.css" rel="stylesheet" type="text/css" />
    <title></title>
    <style>
    body
    {
         font-size:12px;
         margin:0;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <fieldset id="fid" style="margin-left:370px;width:500px;">
    <legend>表单页</legend>
    <div><label>用户(必填)</label><input type="text" id="name" class="required text" /></div>
    <div><label>密码(必填)</label><input type="text" id="Text1"  class="required text"/></div>
    <div><label>数字(必填)</label><input type="text" id="Text4" class="required number" /></div>
    <div><label>文本(必填)</label><input type="text" id="Text5" class="required text"/></div>
    <div><label>邮箱(必填)</label><input type="text" id="Text6"  class="required email"/></div>
    <div><label>网址(必填)</label><input type="text" id="Text7" class="required url" /></div>
    <div><label>手机(必填)</label><input type="text" id="Text8"  class="required mobile"/></div>
    <div><label>电话(必填)</label><input type="text" id="Text2"  class="required isPhone"/></div>
    <div><input type="submit" runat="server" id="regButton" value="提交" onclick="return IsValid()" onserverclick="regButton_Click" />
    <button id="button1" type="submit" runat="server"   onclick="return IsValid()" onserverclick="regButton_Click" >button提交</button>
    
    </div>
    </fieldset>
    <span style=" color:Green">jQuery验证，初始化工作已经在脚本做好，用验证注意两点</span>
    <p style=" color:Red">具体的验证对应的中文提示，已经写好，可以查看Javascript/jQuery.Validate_Msg.js 里面做了注释。</p>
        <p style=" color:Red">(1)客户端服务器控件都加上<span style="color:Green">class="required"</span>之类的标签就可以验证</p>
            <p style=" color:Red">(1)提交表单的按钮，客户端服务端控件加上<span style="color:Green">onclick="return IsValid();"</span>,就可以阻止强行提交表单</p>
            <p style="color:Red">服务端验证也要加上.比较好</p>
    </div>
    </form>
</body>
</html>
